import router from '@/router'
import store from '@/store'

// import { asyncRoutes } from '@/router'

// 下载 => 引入对应文件(js/css)
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

const WHITE_LIST = ['/login', '/404']

// 配置了路由前置守卫,
// 在路由前置守卫中, 一定要放行 无论如何都需要调用一个next()
// next  放行函数 一定要调用
// to    去哪     是一个对象,放了所有你要去的路由的信息
// from  来自哪    是一个对象,放了所有你来的的路由的信息
router.beforeEach(async(to, from, next) => {
  // 页面只要到了前置守卫这, 就快进去了, 此时可以开启进度条
  NProgress.start()

  console.log(to, from, 232323)
  const token = store.getters.token
  if (token) {
    // 有token...不是直接放行??
    if (to.path === '/login') {
      // 要去登录, 引导到首页
      next('/')
      NProgress.done()
    } else {
      // next放行之前, 需要先获取用户资料(封装action), 只有获取到了用户资料(异步操作), 才能放行
      // 等一个异步操作完成之后, 再做某件事 => 回调/promise

      // 将来切换路由时, 只有在没有用户基本资料的前提下, 才需要发请求
      if (!store.state.user.userInfo.userId) {
        // console.log(store.dispatch('user/getUserInfo'))

        const res = await store.dispatch('user/getUserInfo')
        console.log('用户的基本资料: ', res)

        // 应该在知道用户的详细信息(主要指他的menus 权限信息)以后, 你才能对应添加路由规则给他
        // router.addRoutes([{}, {}])

        // 我们这里慢一点, 我们先不添加对应的路由规则, 我们临时添加一下所有路由动态路由规则
        // 这里的添加路由规则是有坑!! 是异步的, 不会立即生效
        // 应该是根据用户menus 去asyncRoutes里面挑属于你自己的路由规则添加
        // 注意: 将来如果你希望拿到action调用以后的返回值, 都通过await
        const otherRoutes = await store.dispatch('permission/filterRoutes', res.roles.menus)

        router.addRoutes([
          ...otherRoutes,
          // 404应该在所有路由的最后(规范)
          { path: '*', redirect: '/404', hidden: true }
        ])
        // router.addRoutes({ path: '*', redirect: '/404', hidden: true })

        // 只要是你调用addRoutes 一定会搭配一个固定操作, 让路由规则生效
        // 技巧: 重新进一次页面(为了能够看到新添加的路由规则)
        // next({
        //   path: to.path,
        //   params: to.params,
        //   query: to.query
        // })

        next({
          ...to, // 重新去一次原来要去的地方
          replace: true // 解决跳转历史重复的问题
        })

        return
      }

      // 且去的不是登录页 直接放行
      next()
    }
  } else {
    // 没有token...., 不是说直接拦截??
    if (WHITE_LIST.includes(to.path)) {
      // 此时去的是白名单页面(不重要的, 不做限制的, 随意去)
      next()
    } else {
      // 此时去的是重要的需要登录的页面, 但是你没有token, 拦截去登录
      next('/login')
      NProgress.done()
    }
  }
  // next()
})

// bug: 在有token的前提下, 如果你访问login, 引导回首页, => 进度条没法关闭
// 分析: 如果这个页面组件真的进入了后置守卫, 一定执行后置守卫的代码, 一定会关闭进度条, 之所以上面出现没关闭的情况, 一定是没进入后置守卫, ??????????

// 什么时候会不进入后置守卫?? => 被拦截走
// 解决: 那么在被拦截走的时候 手动关闭进度条NProgress.done()

// to => 是一个对象,放了所有你要去的路由的信息
// from => 是一个对象,放了所有你来的的路由的信息
// 后置守卫没有放行函数的!!!已经进来了
router.afterEach((to, from) => {
  // 这里就是在配置后置守卫的代码,
  // 页面组件只要进入展示之后, 就会立马触发后置守卫, 执行里面的逻辑, 关闭进度条...
  // setTimeout(() => {
  NProgress.done()
  // }, 300)
})

// permission.js文件的说明:
// 权限 这个文件是用来进行登录拦截控制
// pc后台管理系统, 如果用户没登录, 登录可以看, 404也可以看, 其他的页面不给看
// 页面访问权限来说, 取决于用户登录没登录,
// 思路:
// 判断用户是否登录, => token
// 白名单是个数组, 里面放的是不作任何限制的页面的路由地址(随意去的页面路径不多)

console.log(WHITE_LIST)
// 1. 有token,
//    如果你还要去/login, 引导到首页
//    如果去的不是/login, 直接去
// 2. 没有token,
//    此时你访问的是白名单的路径, 直接去,
//    此时如果你非要去白名单以外的路径, 拦截走登录

// 移动端来说, 如果用户不登录的话, 也是能看一些页面的

// import router from './router'
// import store from './store'
// import { Message } from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
// import { getToken } from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'

// NProgress.configure({ showSpinner: false }) // NProgress Configuration

// const whiteList = ['/login'] // no redirect whitelist

// router.beforeEach(async(to, from, next) => {
//   // start progress bar
//   NProgress.start()

//   // set page title
//   document.title = getPageTitle(to.meta.title)

//   // determine whether the user has logged in
//   const hasToken = getToken()

//   if (hasToken) {
//     if (to.path === '/login') {
//       // if is logged in, redirect to the home page
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       const hasGetUserInfo = store.getters.name
//       if (hasGetUserInfo) {
//         next()
//       } else {
//         try {
//           // get user info
//           await store.dispatch('user/getInfo')

//           next()
//         } catch (error) {
//           // remove token and go to login page to re-login
//           await store.dispatch('user/resetToken')
//           Message.error(error || 'Has Error')
//           next(`/login?redirect=${to.path}`)
//           NProgress.done()
//         }
//       }
//     }
//   } else {
//     /* has no token*/

//     if (whiteList.indexOf(to.path) !== -1) {
//       // in the free login whitelist, go directly
//       next()
//     } else {
//       // other pages that do not have permission to access are redirected to the login page.
//       next(`/login?redirect=${to.path}`)
//       NProgress.done()
//     }
//   }
// })

// router.afterEach(() => {
//   // finish progress bar
//   NProgress.done()
// })
